<template>
  <div class="about">
    <div class="title">关于玉发</div>
    <div class="sub-title">集研发、设计、销售为一体的现代高品质磨料磨具生产单位</div>
    <div class="case-content">
      <div class="item">
        <img
          src="https://proc58103-pic18.websiteonline.cn/upload/templatefiles/1c65e380262491ba6345da2ad6b5e89a_tbvp.png" />
        <div class="desc">
          <div> 1987年 </div>
          <div> 成立时间 </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://proc58103-pic18.websiteonline.cn/upload/templatefiles/325e0a329d497c05f0a52a37db5f6571_plkk.png" />
        <div class="desc">
          <div> 100+ 人 </div>
          <div> 客户案例 </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://proc58103-pic18.websiteonline.cn/upload/templatefiles/62dc646d44a15c0d3d81c1cd2e21b923_7mcf.png" />
        <div class="desc">
          <div> 80+个 </div>
          <div> 荣誉证书 </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://proc58103-pic18.websiteonline.cn/upload/templatefiles/aeb18c213ab5f0c4db123159f5ab6b7f_begh.png" />
        <div class="desc">
          <div> 100+人 </div>
          <div> 员工人数 </div>
        </div>
      </div>
    </div>
    <div class="intro-content">
      <div class="left">
        　　郑州玉发集团始于1987年，是专业研发、生产多品种氧化铝的高新技术企业。建有五个研发中心，三个生产基地，为磨料磨具、高温材料、氧化铝陶瓷、防腐涂料、LED玻璃、电工填料、研磨抛光、导热材料等多个领域的顶尖客户提供高品质氧化铝系列产品。
        <br><br>
        　　公司主要产品：高体密白刚玉、低钠白刚玉、致密刚玉、单晶刚玉、镁铝尖晶石、α-氧化铝、氧化铝造粒粉、氧化铝陶瓷等八大系列300多个品种，拥有15台全自动数控冶炼炉，两条回转窑、一条隧道窑、一条推板窑，产能20万吨。是中国磨料磨具协会副理事长单位、全国磨料磨具标准化技术委员会先进委员单位，荣获“全国磨料磨具行业刚玉生产企业十强”、“河南省质量信誉双优示范单位”、“河南省十佳科技型具创新力领军企业”、“中国磨料磨具行业著名产品”、“江苏省陶瓷协会副会长单位”等荣誉称号，负责起草修订了GB/T2479-2008、GB/T2479-2018白刚玉磨料国家新标准。
        <br><br>
        <div class="factory-imgs">
          <img src="https://proc58103-pic18.websiteonline.cn/upload/20180927115117.jpg" alt="">
          <img style="margin: 0 10px;" src="https://proc58103-pic18.websiteonline.cn/upload/20180927115129.jpg" alt="">
          <img src="https://proc58103-pic18.websiteonline.cn/upload/20180927115141.jpg" alt="">
        </div>
      </div>
      <div class="right">
        <video class="into_vedio" ref="myVideoRef" controls poster="https://proc58103-pic18.websiteonline.cn/upload/044bae32-973f-4308-bfc6-2f5517c5d47e.jpg" src="https://vod.yfml.com/video/video.mp4"></video>
        <div class="play-vedio-btn" v-if="!isPlaying" @click="togglePlay">
          <i class="el-icon-video-play"></i>
        </div>
      </div>
    </div>
    <div class="intro-img">
      <img src="https://proc58103-pic18.websiteonline.cn/upload/8764beb3-2f78-44ab-b4a9-ccd78ec53f57.jpg" alt="">
    </div>
  </div>
</template>
  
<script>
  export default {
    name: "HomeAbout",
    data() {
      return {
        isPlaying: false
      };
    },
    methods: {
      togglePlay() {
        const video = this.$refs.myVideoRef;
        if (video.paused) {
          video.play();
          this.isPlaying = true;
        } else {
          video.pause();
          this.isPlaying = false;
        }
      },
      videoEvent() {
        // 监听视频播放和暂停事件
        const video = this.$refs.myVideoRef;
        video.addEventListener('play', () => {
          this.isPlaying = true;
        });
        video.addEventListener('pause', () => {
          this.isPlaying = false;
        });
      }
    },
    mounted() {
      this.videoEvent()
    }
  };
  </script>
  
<style lang="scss" scoped>
.about {
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: rgb(206, 9, 9);
    margin-top: 80px;
    font-weight: bold;
  }

  .sub-title {
    width: 100%;
    text-align: center;
    color: #5A5A5A;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    margin-top: 20px;
    font-weight: bold;
  }

  .case-content {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 50px auto 30px auto;

    .item {
      display: flex;

      img {
        height: 50px;
        margin-right: 10px;
      }

      .desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }

  .intro-content {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 50px auto 30px auto;

    .left {
      flex: 1;
      line-height: 180%;
      .factory-imgs {
        display: flex;
        justify-content: space-between;

        img {
          width: auto;
          height: 147px;
        }
      }
    }

    .right {
      flex: 1;
      margin-left: 20px;
      position: relative;
      .into_vedio {
        width: 100%;
        height: 100%;
        background: #000;
      }
      .play-vedio-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 9;
        width: 88px;
        height: 43px;
        border: 1px solid #fff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #000, $alpha: 0.4);
        .el-icon-video-play {
          font-size: 20px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .intro-img {
    width: 1200px;
    height: 227px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
  